import React,{Component} from 'react'
import Men from '../Men'
import axios from 'axios'
import DocumentTitle from 'react-document-title'


class Home extends Component{
    render(){
        return (
            <DocumentTitle title="mybiaoti" >
                <div id="app">
            
                <div>
                    <h1 className={this.state.isShow ? 'show' : 'hide'}>golang</h1>
                    <button onClick={this.toToggole}>打开</button>
                    <input value={this.state.inputValue}  ref={(input)=>{this.inputt=input}} onChange={this.inputChange.bind(this)} /> 
                    <button onClick={this.addList.bind(this)} >新增功能</button>
                </div>
                <ul ref={(ul)=>{this.ul=ul}}>
                    {
                        this.state.list.map(
                            (item,index)=>{
                              return (
                                // <div key={index + item} >
                                    <Men  key={index + item}   delete={this.deleteItem.bind(this)} index={index}  test={item} /> 
                            //    </div>
                              ) 
                            }
                        )
                    }
                </ul>
                </div>
            </DocumentTitle >
        )
    }
    constructor(props){
        super(props) //调用父类的构造函数，固定写法
        this.state={
            isShow:true,
            title:'我是标题',
            inputValue:'home' , // input中的值
            list:['仪表盘','菜单']    //服务列表
        }
        this.toToggole = this.toToggole.bind(this);
    }
    inputChange(e){
        // console.log(e.target.value);
        // this.state.inputValue=e.target.value;
        // this.setState({
        //     inputValue:e.target.value
        // })
        this.setState({
            inputValue:this.inputt.value
        })
    }
    addList(e){
        if(this.state.inputValue === "") return;
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            inputValue:''
        },()=>{
            console.log(this.ul.querySelectorAll("div").length);
        })
    }
    //删除单项服务
    deleteItem(index){
        let list = this.state.list
        list.splice(index,1)
        this.setState({
            list:list
        })
        
    }
    //
    componentWillMount(){
        console.log("将组件挂在到页面时刻");
    }

    // 执行初始化函数
    componentDidMount(){
        axios.get('http://php.xu.com/').then((res)=>{
            // console.log('axios 获取数据成功:'+JSON.stringify(res))
           this.setState({
               list:res.data
           })
        }).catch((err)=>{
            console.log("axios请求异常:"+err);
        });
        console.log("组件挂载完毕之后执行");
    }
    shouldComponentUpdate(){
        console.log("组件更新之前");
        return true;
    }
    componentWillUpdate(){
        console.log('shouldComponentUpdate函数 组件更新之前');
    }
    componentDidUpdate(){
        console.log('组件更新之后');
    }
    componentWillReceiveProps(){
        console.log("传入子组件参数1111111");
    }
    componentDidCatch(){
        console.log("页面错误");
    }
    toToggole(){
        console.log(!this.state.isShow);
        this.setState({
            isShow:!this.state.isShow
        });
    }
}

export default Home